<template>
    <div class="points-details-main">
        <Dialog :app-dialog="appDialog">
            <ZwSearchForm class="search-box-point" :option="searchOption" @search="search" @reset="reset" />
            <ZwTable
                ref="tableRef"
                class="table-box-point"
                tab-h="450"
                :option="tableOption"
                :fetch-params="state.searchParams"
                :fetch-api="fetchApi()">
            </ZwTable>
        </Dialog>
    </div>
</template>
<script setup lang="tsx">
import { ref, reactive, computed } from 'vue';
import { deepCopy } from '@/utils/helper';
import { ElMessage, ElButton } from 'element-plus';
import { interactPoints, searchActivity } from '@/api/member/memberList/index';
import Dialog from '@/components/Dialog.vue';
import ZwSearchForm from '@/components/zw/search-form/SearchForm';
import ZwTable from '@/components/zw/table/Table';

const tableRef = ref<any>(null);

const cancelHandel = () => {
    appDialog.visible = false;
};

const submitHandel = () => {
    appDialog.visible = false;
};

const appDialog = reactive<any>({
    visible: false,
    title: '积分记录',
    width: '1100',
    submit: submitHandel,
    submitText: '关闭'
});

const pointTypeOptions = [
    {
        value: '1',
        label: '活动奖励'
    },
    {
        value: '2',
        label: '积分互换'
    }
];
const searchOption = computed(() => {
    return [
        {
            label: '更新时间',
            name: 'updated_at',
            value: [],
            type: 'datePicker',
            datePickerType: 'daterange',
            datePickerFormat: 'YYYY-MM-DD',
            valueFormat: 'YYYY-MM-DD HH:mm:ss',
            startPlaceholder: '开始日期',
            endPlaceholder: '结束日期'
        },
        {
            label: '类型',
            name: 'points_type',
            value: '',
            type: 'select',
            clearable: true,
            placeholder: '请选择类型',
            formatOption: (v: any) => ({
                label: v.label,
                value: v.value
            }),
            optionList: pointTypeOptions
        },
        {
            label: '来源活动',
            name: 'activity_id_list',
            value: '',
            type: 'selectV2',
            placeholder: '请输入活动名称',
            clearable: true,
            multiple: true,
            filterable: true,
            remote: true,
            fetchOptionApi: (keyword: string) => {
                return new Promise(resolve => {
                    const params = {
                        activity_name: keyword,
                        wx_external_userid: state.searchParams.wx_external_userid,
                        page: 1,
                        page_size: Number.MAX_SAFE_INTEGER
                    };
                    searchActivity(params).then((res: any[]) => {
                        const list = res.data.map((item: any) => ({
                            value: item.id,
                            label: item.activity_name
                        }));
                        resolve(list);
                    });
                });
            }
        }
    ];
});

const tableOption = [
    {
        prop: 'points_num_name',
        label: '变动值',
        width: 100
    },
    {
        prop: 'points_type',
        label: '类型',
        width: 100,
        render({ row, column, index }: any) {
            return (
                <div className={'point-types'}>
                    {pointTypeOptions.find(x => x.value == row.points_type)?.label || '--'}
                </div>
            );
        }
    },
    {
        prop: 'points_name',
        label: '名称',
        showOverflowTooltip: true,
        minWidth: 120,
        render({ row, column, index }: any) {
            return <div>{row.points_name ? row.points_name : '--'}</div>;
        }
    },
    {
        prop: 'points_channel',
        label: '来源渠道',
        width: 120,
        render({ row, column, index }: any) {
            return <div>{row.points_channel == 1 ? '客易达SCRM' : '--'}</div>;
        }
    },
    {
        prop: 'activity_name',
        label: '来源活动',
        showOverflowTooltip: true,
        minWidth: 200,
        render({ row, column, index }: any) {
            return <div>{row.activity_name ? row.activity_name : '--'}</div>;
        }
    },
    {
        prop: 'remark',
        label: '备注',
        showOverflowTooltip: true,
        minWidth: 150,
        render({ row, column, index }: any) {
            return <div>{row.remark ? row.remark : '--'}</div>;
        }
    },
    {
        prop: 'updated_at',
        label: '更新时间',
        width: 170,
        render({ row, column, index }: any) {
            return <div>{row.updated_at ? row.updated_at : '--'}</div>;
        }
    }
];

const defaultParams = {
    wx_external_userid: '',
    updated_at: [],
    points_type: '',
    activity_id_list: []
};

const state = reactive({
    searchParams: deepCopy(defaultParams)
});

const search = (data: any) => {
    const wx_external_userid = state.searchParams.wx_external_userid;
    state.searchParams = deepCopy({ ...defaultParams, ...data, wx_external_userid });
};

const reset = () => {
    const wx_external_userid = state.searchParams.wx_external_userid;
    state.searchParams = deepCopy({ ...defaultParams, wx_external_userid });
};

const fetchApi = () => {
    return interactPoints;
};

defineExpose({
    appDialog,
    state,
    reset
});
</script>
<style lang="scss" scoped>
.points-details-main {
    :deep(.table-box-point .el-table) {
        min-height: 450px;
    }

    :deep(.zw-search-form) {
        margin-bottom: 0;
    }

    :deep(.point-types) {
        height: 46px;
        display: flex;
        align-items: center;
    }

    :deep(.zw-table__com_table.el-table .el-table__body tbody tr td) {
        padding: 8.5px 0;
    }
}
</style>
